import React, {Component} from 'react'
import {FormattedMessage} from 'react-intl'
import {Col, Button, Select} from 'antd'
import {HeaderWrapper} from "./styled";
import {connect} from 'react-redux'
import {actionFunc as loginActionFunc} from '@/components/Login/store'
import {actionFunc as intlActionFunc} from '@/components/Intl/store'

const Option = Select.Option

class Header extends Component {
    render() {
        const {logOut, languages, locale,changeLocale} = this.props
        return (
            <HeaderWrapper>
                <Col span={10} className='header-left'>
                    <i className='iconfont logo'>&#xe6f0;</i>
                    <span className='logo-title'>Router 800</span>
                </Col>
                <Col span={14} className='header-right'>
                    {/*<span className='user'>{"welcome, " + this.props.admin}</span>*/}
                    <span className='user'>
                        <FormattedMessage
                            id='welcome'
                        />
                         {this.props.admin}
                         </span>
                    <i className='iconfont user'>&#xe673;</i>
                    <Button type='primary' className='btn' onClick={logOut}>
                        <FormattedMessage id='logout'/></Button>
                    <Select className='lan' defaultValue={locale} onChange={changeLocale}>
                        {
                            languages.map(item =>
                                <Option key={item.get('value')} value={item.get('value')}>{item.get('name')}</Option>
                            )
                        }
                    </Select>
                </Col>
            </HeaderWrapper>
        )
    }
}

const mapState = (state) => ({
    admin: state.getIn(['header', 'admin']),
    languages: state.getIn(['header', 'languages']),
    locale: state.getIn(['intl','locale'])
})
const mapDispatch = (dispatch) => ({
    logOut() {
        localStorage.removeItem('loginStatus')
        dispatch(loginActionFunc.changeLoginStatus(false))
    },
    changeLocale(locale){
        dispatch(intlActionFunc.changeLocale(locale))
    }
})

export default connect(mapState, mapDispatch)(Header)
